<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>换行文字自动切换布局</title>
  <style>
    .text-container {
      display: block;
      margin: 0 auto;
      width: fit-content; /* 内容宽度 */
    }
    .dynamic-text {
      text-align: center; /* 默认居中 */
      word-break: break-word; /* 根据容器宽度换行 */
    }
    .dynamic-text.left-align {
      text-align: left; /* 添加类时切换到靠左 */
    }
  </style>
</head>
<body>
  <div class="text-container">
    <div class="dynamic-text" id="dynamicText">
      第一行文字会居中显示。换行后，这段文字需要靠左显示，示例文字为了模拟效果加长。
    </div>
  </div>

  <script>
    function adjustTextAlignment() {
      const textElement = document.getElementById('dynamicText');
      const containerWidth = textElement.offsetWidth; // 容器宽度
      const contentWidth = textElement.scrollWidth; // 内容总宽度

      if (contentWidth > containerWidth) {
        // 内容超出容器，表示有换行，添加左对齐类
        textElement.classList.add('left-align');
      } else {
        // 没有换行，保持居中
        textElement.classList.remove('left-align');
      }
    }

    // 调用调整函数
    adjustTextAlignment();

    // 监听窗口大小变化，动态调整
    window.addEventListener('resize', adjustTextAlignment);
  </script>
</body>
</html>
